<template>
  <div class="dls">
    <!-- 头部 -->
    <user-header :headerData="headerData" @show="_show_qrcode()"></user-header>
    <!-- 导航 -->
    <user-nav :memberData="memberData" :current="5"></user-nav>
    <!-- 提现 -->
    <div class="accountPanel-links">
      <section class="accountPanel">
        <div class="iner-bor">
          <div @click="Jump('commissionContent')">
            <div class="item fl">
              <!-- <i class="fontAliBaba" v-html="scaleGoodsPriceNoMarkFn(total_commission)"></i> -->
              <i class="fontAliBaba" v-if="parseFloat(remaining_commission)" v-html="scaleGoodsPriceNoMarkFn(remaining_commission)"></i>
              <i class="fontAliBaba price-scale " v-else><span class="num-font">{{remaining_commission}}</span></i>
              <p>{{ftitle_agency_commission_left}}</p>
            </div>
            <div class="item fl">
              <!-- <i class="fontAliBaba" v-html="scaleGoodsPriceNoMarkFn(wait_commission)"></i> -->
              <i class="fontAliBaba" v-if="parseFloat(wait_commission)" v-html="scaleGoodsPriceNoMarkFn(wait_commission)"></i>
              <i class="fontAliBaba price-scale" v-else><span class="num-font">{{wait_commission}}</span></i>
              <p>待收益</p>
            </div>
          </div>
          <span @click="Jumps('myCommission')" class="fr btn-sign">
            <i></i>提现
          </span>
        </div>
        <div class="line-bor"></div>
      </section>
      <div class="style2-links clearfix">
        <div @click="Jump('dlsGoods')" class="link" v-if="show_dl_product">
          <!-- <i class="icon-links icon3_5"></i> -->
          <span class="num fontAliBaba">{{agent_common_num.agent_item_count}}</span>
          <span class="title">{{agent_common_num.agent_item_name}}</span>
        </div>
        <div @click="Jump('nextLevelAgency')" class="link" v-if="show_dl_agencies">
          <!-- <i class="icon-links icon3_2"></i> -->
          <span class="num fontAliBaba">{{agent_common_num.agency_total}}</span>
          <span class="title">{{agent_common_num.ftitle_agencies}}</span>
        </div>
        <div @click="Jump('nextLevelAgencyUser')" class="link" v-if="show_dl_agency_user">
          <!-- <i class="icon-links icon3_3"></i> -->
          <span class="num fontAliBaba">{{agent_common_num.agency_user_total}}</span>
          <span class="title">{{agent_common_num.ftitle_agency_user}}</span>
        </div>
        <div @click="Jump('agencyOrder')" class="link" v-if="show_dls_teamOrder">
          <!-- <i class="icon-links icon3_4"></i> -->
          <span class="num fontAliBaba">{{agent_common_num.agency_order_total}}</span>
          <span class="title">{{agent_common_num.ftitle_agency_order}}</span>
        </div>
      </div>
    </div><!-- 业绩明细模块 -->
    <dls-static v-if="dlsInfo.dls_statistical_detail == 1"></dls-static>
    <!-- 我的服务 -->
    <template>
      <dls-index :dlsInfo="dlsInfo" v-if="template_style == 1" @showQrcode="_show_qrcode()"></dls-index>
      <dls-index2 :dlsInfo="dlsInfo" v-else-if="template_style == 2" @showQrcode="_show_qrcode()"></dls-index2>
    </template>

    <van-popup v-model="is_show_qrcode" class="code-pop">
      <img :src="qrcode_url" alt @longpress="saveCodeImage(qrcode_url)"/>
    </van-popup>
  </div>
</template>

<script>
import Vue from 'vue'
import { mapGetters } from 'vuex'
import userNav from '@/views/user/components/nav/index'
import userHeader from '@/views/user/components/header/index'
import dlsIndex from '@/views/user/dls/components/dlsIndex/index'
import dlsIndex2 from '@/views/user/dls/components/dlsIndex2/index'
import dlsStatic from './dlsStatis'

import { getAgencyInfo } from '@/api/user/dls/dlsApi'
import { getCommissionIncome } from '@/api/user/user'
// import ad_img from '@img/user/ad.png'
import { scaleGoodsPriceNoMark } from '@/utils/index.js'
import small from '@/smallapp/small'

import { Popup } from 'vant'

Vue.use(Popup)
export default Vue.extend({
  data() {
    return {
      template_style: 1,
      memberData: {},
      headerData: {
        bgImg: 'https://img.wifenxiao.com/h5-wfx/images/user/member/user_style3_bg_black.png',
        userImg: 'https://img.wifenxiao.com/h5-wfx/images/user/userimg.png',
        nickname: '',
        mobile: '',
        show_level: true,
        rank_name: '',
        end_time: '',
        letterCount: 0,
        show_qrcode: true,
        dls_area: '',
        ftitle_agency_area: ''
      },
      dlsInfo: {
        // 定制 start
        syyysj_dz: 1, // 三亚云游世界
        // 定制 end
        is_user_img: true,
        user_img_link: '222',
        user_img_ggt:
          '',
        is_app_open: false,
        is_store_log: 1,
        show_myStore: true,
        ftitle_store: '店中店',

        show_dls_levelSubcontractor: true,

        show_dls_teamPerformance: true,

        show_dls_superior: true,
        superior_user_id_info: 1,
        ftitle_superior: '我的上级',
        superior_user: '123',

        show_dls_superior_agent: true,
        dls_is_display: true,
        ftitle_dls_superior: '我的上级代理商',
        user_dls_info: '11',

        is_dls_team_bonus: true,

        show_dls_orderRanking: true
      },

      is_show_qrcode: false,

      // top_bg: null,
      qrcode_url: '',

      remaining_commission: '--',
      ftitle_agency_commission_left: '',
      wait_commission: '--',
      agent_common_num: {},
      show_dl_product: true,
      show_dl_agencies: true,
      show_dl_agency_user: true,
      show_dls_teamOrder: true
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.$loadingWrap.show()
      getAgencyInfo().then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          const resData = res.data
          // TODO 小程序处理 wxConfig.template_style
            resData.template_style ? this.template_style = resData.template_style : ''
            wx.setNavigationBarTitle({
              title: res.data.common_center_parameter.ftitle_agency
            })
          // 导航数据
          this.memberData = Object.assign(resData.common_center_parameter, resData.common_center_renovation_parameter)
          this.memberData.user_type = resData.user_identity.user_type
          this.memberData.is_agent = resData.user_identity.is_agent
          this.memberData.is_show_distributor = resData.is_show_distributor
          this.memberData.system_function_model = resData.system_function_model
          this.memberData.is_check_dhs = resData.is_check_dhs
          this.memberData.is_show_dhs = resData.is_show_dhs
          this.memberData.is_wx = resData.is_wx
          this.memberData.is_app = resData.is_app
          this.memberData.is_show_agent = resData.is_show_agent
          this.memberData.is_show_gys = resData.is_show_gys
          this.memberData.supplier_flag = resData.supplier_flag
          this.memberData.is_tgy = resData.is_tgy
          this.memberData.is_dls = resData.is_dls
          this.memberData.ftitle_gys_center = resData.ftitle_gys_center
          // x+1 链动中心 start
          this.memberData.is_chaining = resData.is_chaining || 0
          this.memberData.is_show_chaining = resData.is_show_chaining
          // x+1 链动中心 end
          // 复制中心 start
          this.memberData.has_replicate_rank = resData.has_replicate_rank || 0
          this.memberData.is_show_replicate_center = resData.is_show_replicate_center
          // 复制中心 end

          //  头部数据
          if (resData.top_bg != '') {
            this.headerData.bgImg = resData.top_bg
          }
          // TODO 头像处理
          this.headerData.userImg = resData.avatar.indexOf('http') > -1 ? resData.avatar : 'https://img.wifenxiao.com/h5-wfx/images/default_avatar.jpg'
          this.headerData.nickname = resData.dlsInfo.nickname
          this.headerData.mobile = resData.dlsInfo.mobile
          this.headerData.show_level = resData.show_level
          this.headerData.rank_name = resData.dlsInfo.rank_name
          this.headerData.end_time = resData.dlsInfo.end_time
          this.headerData.letterCount = resData.common_center_parameter.letterCount
          this.headerData.show_qrcode = resData.common_center_renovation_parameter.show_qrcode
          this.headerData.dls_area = resData.dls_area
          this.headerData.ftitle_agency_area = resData.ftitle_agency_area
          this.headerData.dls_mode = resData.dls_mode
          this.qrcode_url = resData.qrcode_url
          // this.total_commission = resData.dlsInfo.total_commission
          this.ftitle_agency_commission_left = resData.ftitle_agency_commission_left
          // this.wait_commission = resData.wait_commission
          this.show_dl_product = resData.show_dl_product
          this.show_dl_agencies = resData.show_dl_agencies
          this.show_dl_agency_user = resData.show_dl_agency_user
          this.show_dls_teamOrder = resData.show_dls_teamOrder
          this.agent_common_num = resData.agent_common_num
          // 图标数据
          this.dlsInfo = Object.assign(resData, resData.agent_common_num)
        } else {
          this.$Error(res.msg)
        }
      })
      getCommissionIncome().then(res => {
        if (res.status == 1) {
          this.remaining_commission = res.data.remaining_commission
          this.wait_commission = res.data.wait_commission
        } else {
          this.$Error(res.msg)
        }
      })
    },
    // 展示二维码
    _show_qrcode() {
      this.is_show_qrcode = !this.is_show_qrcode
    },
    saveCodeImage(url) {
      small.saveImage(url)
    },
    Jump(url, data) {
      this.$JumpPath(this, url, data)
    },
    Jumps(url, data) {
      this.$JumpPath(this, url, data)
    },
    scaleGoodsPriceNoMarkFn(price) {
      return scaleGoodsPriceNoMark(price)
    }
  },
  computed: {
    ...mapGetters(['wxConfig'])
  },
  components: {
    userNav,
    userHeader,
    dlsIndex,
    dlsIndex2,
    dlsStatic
  }
})
</script>

<style lang="scss">
@import 'src/styles/user/index.scss';
.dls {
  .accountPanel-links.style2 {
    .iner-bor {
      border: none;
    }
  }
  .dls-links {
    border-radius: 16px;
    background: #fff;
    padding-bottom: 20px;
    font-family: PingFang SC Medium, Microsoft YaHei, SimHei;
    display: flex;
    justify-content: space-between;
    .link {
      flex: 1;
      display: block;
      float: left;
      width: 25%;
      text-align: center;
      padding: 16px 0 10px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .title {
        font-size: 28px;
        color: #333;
        display: inherit;
        line-height: 48px;
      }

      .num {
        min-width: 36px;
        padding: 1px 4px;
        background: #fff;
        color: #ff5a00;
        text-align: center;
        font-size: 28px;
      }
    }
  }
}
</style>
